import React, { Component } from 'react';
import { connect } from 'dva';
import { Link, routerRedux} from 'dva/router';
import { Flex ,ImagePicker,Button,Toast,TextareaItem,List} from 'antd-mobile';
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import {createForm} from "rc-form";

import {mobile}from '../../utils/judgmentEquipment'
const {Item} =List;
class MyFeedback extends Component {
    constructor(props) {
        super(props);
        this.state = {
            files:[],
            //value:"",

        };
        this.imgLength = 0;
        this.imgURL = this.props.orderList.imgUrl;
    }
    onChange = (files, type, index) => {
        console.warn(files, type, index, 'Image onChange.............');
        console.log(files)
        // if(files.length>5){
        //     Toast.info("上传数量不能超过5张!",2,()=>{
        //         this.setState({
        //             files:files.slice(0,5)
        //         })
        //         console.log(this.state.files)
        //     })
        // }else{
        //     this.setState({
        //         files,
        //     });
        // }
        // if(files.length>5){return !Toast.info("上传图片数量超过限制!",2)}
        if (files.length > 5) return !Toast.fail("上传图片数量超过限制!", 2);
        this.setState({
            files
        })
        if (type == "add") {
            // // 发送请求。并接受。。。
            console.log(`开始上传第${files.length}张图片`);


            
            this.props.dispatch({type:"orderList/upLoadEFF", obj: {upfile: files[files.length - 1].file}})
        } else if ( type == "remove") this.imgURL.splice(index, 1)

        this.imgLength = files.length;

    }

    onImageClick = (i, files) => {
        console.log(i, files, '图片单击事件被触发。。。。。');
    }

    componentWillMount(){

    }
    postComment = () => {
        const {count, title, phone} = this.props.form.getFieldsValue();
        const {
            files,
        } = this.state;
        if (title == undefined) {
            Toast.info('请填入标题', 1)
            return;
        }
        // if (count == undefined) {
        //     Toast.info('请填入标题', 1)
        //     return;
        // }
        //
        // if(files.length==0) {
        //     Toast.info('请传入图片', 1)
        //     return;
        // }
        this.props.dispatch({
            type: 'accountManagement/FeedbackEFF',
            obj: {title: title, content: count, images: this.imgURL.join(","), telphone: phone, systemType: mobile()}
        // })
    }).then(result => {
        if (result.msg=='提交成功') {
            Toast.success(result.msg, 1.5, () => this.props.dispatch(routerRedux.replace({pathname: '/accountManagement' })))
        };
    })
    }
        render() {
            // console.warn(this, 'this.....................');

            const { files } = this.state;
            const { getFieldProps } = this.props.form;
        return (
            <Flex style={{
                height:"100%" ,position:'relative'
            }} direction="column">
                <NavTopBar title="意见反馈" dispatch={this.props.dispatch}/>
                <Flex style={{width:'100%',height:'1rem',background:'#fff',marginTop:'.1rem'}}>
                   <span style={{display:"inlineBlock",marginLeft:'.3rem',fontSize:'.3rem'}}>标题：</span>
                    <input  {...getFieldProps('title')} style={{marginLeft:'.1rem',width:'70%',height:'.4rem',display:'inlineBlock',border:'none',fontSize:'.3rem'}}type="text" placeholder={'请输入(必填)'}/>
                </Flex>
                <List style={{width:'100%',background:'#fff',marginTop:'.1rem'}}>
                    <Item>
                        <TextareaItem
                            {...getFieldProps('count')}
                            placeholder="请输入(200字以内)"
                            clear
                            rows={5}
                            count={200}
                            style={{borderBottom:"0"}}
                        />
                        <div >
                            {/*<Icon type={xiangjisvg.id} style={{width:".7rem",height:".7rem",marginTop:".2rem"}}></Icon>*/}
                            {/*<p>添加图片</p>*/}
                            <ImagePicker
                                files={files}
                                multiple={ true }
                                onChange={this.onChange}
                                selectable={files.length < 9}
                                onClick={this.onImageClick}
                            />
                        </div>
                    </Item>
                    {/*<textarea  {...getFieldProps('count')} maxLength="200" placeholder={'请输入(200字以内)'} rows="5" style={{borderColor:'#eee',width:'100%',display:'inlineBlock',height:'2rem',}}/>*/}
                    {/*<div>*/}
                        {/*<ImagePicker*/}
                            {/*files={files}*/}
                            {/*onChange={this.onChange}*/}
                           {/*// onImageClick={(index, fs) => console.log(index, fs)}*/}
                            {/*selectable={files.length < 5}*/}
                        {/*/>*/}
                    {/*</div>*/}
                </List>
                {/*<div style={{backgroundColor:"#fff",width:"100%",marginTop:".3rem",paddingBottom:"1.5rem"}}>*/}
                {/*<WingBlank>*/}
                {/*<p>上传照片</p>*/}
                {/*<ImagePicker*/}
                {/*files={this.state.files}*/}
                {/*onChange={this.onChange}*/}
                {/*selectable={files.length < 3}*/}
                {/*/>*/}
                {/*<p>最多上传3张,每张不超过5M,支持:JPG、BMP、PNG</p>*/}
                {/*</WingBlank>*/}
                {/*</div>*/}

                <Flex style={{width:'100%',height:'1rem',background:'#fff',marginTop:'.1rem'}}>
                    <span style={{display:"inlineBlock",marginLeft:'.3rem',fontSize:'.3rem'}}>联系方式：</span>
                    <input   {...getFieldProps('phone')}style={{marginLeft:'.1rem',width:'70%',height:'.4rem',display:'inlineBlock',border:'none',fontSize:'.3rem'}}type="text" placeholder={'非必填'}/>
                </Flex>
                <Button type="warning" style={{position:'absolute',bottom:'0',width:'100%',background:"#ff0036",borderRadius:"0"}} onClick={this.postComment} >提交</Button>
            </Flex>
        );
    }
}


export default connect(({ accountManagement }) => ({ accountManagement }))(createForm()(MyFeedback));
